<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="div">{{info}},{{info2}}
       <div v-html="info2"></div>
       <div v-text="info2"></div>
       <a v-bind:href="href">vue_03.html</a>
       <!--绑定class-->
       <div v-bind:class="{active:isActive,danger:isDanger}"></div>
       <div v-bind:class="classObject"></div>
       <div v-bind:class="[active,danger]"></div>
       <!--绑定内联样式style-->
       <div v-bind:style="styleObject">Hello Vue!</div>
       <div v-bind:style="[color,fontSize]">Hello Vue</div>
       <img v-bind:src="src">
   </div>

</body>
<script>

    //创建vue对象
    var vue1 = new Vue({
        el:"#div",
        data:{
            info:"我是一个div",
            info2:"<h1>我是一个div</h1>",
            href:"vue_03.html",
            isActive:true,
            isDanger:false,
            classObject:{
                active:false,
                danger:true
            },
            active:"active",
            danger:null,
            styleObject:{
                color:"red",
                "font-size":"30px"
            },
            color:{
                color:"blue"
            },
            fontSize:{
                "font-size":"30px"
            },
            src:"../img/1.jpg"

        }
    });
</script>
</html>